<template>
    <div class="main">
        <Header></Header>
        <div>
            <div class="item" @click="toStart">
                <el-icon class="icon-i"><Monitor /></el-icon><br>
                <span>全屏录制</span>
            </div>
            <div class="item" @click="areaChose">
                <el-icon class="icon-i"><Crop /></el-icon><br>
                <span>区域录制</span>
            </div>
            
        </div>
    </div>
</template>
<script setup>
    import Header from './common/header.vue'
    import {ref} from 'vue'
    import { useRouter } from 'vue-router';
    const outPah = ref('');
    const router = useRouter();
    const ipcRender = window.require('electron').ipcRenderer;
    let chunk = [];
    let mediaRecorder = null;
    var desktopCapturer = window.require('electron').desktopCapturer;
    var fs = window.require('fs');
    ipcRender.on('stop:cur',() => {
        stop();
    })
    ipcRender.on('start:curt',() => {
        console.log('receve start');
        start();
    })
    function stop(){
        mediaRecorder.onstop = (e) => {
            console.log("data available after MediaRecorder.stop() called.");
            let blob = new Blob(chunk,{type:'video/webm'});
            let filereader = new FileReader();
            filereader.onload = function(){
                let temp = this.result;
                let buffer = new Buffer(temp.byteLength);
                let u8arr = new Uint8Array(temp);
                for(var i = 0;i<temp.byteLength;i++) {
                    buffer[i] = u8arr[i];
                }
                fs.writeFile('D:\\test.webm',buffer,err => {
                    if(!err) {
                        ipcRender.send('save:success','文件已成功保存至D:')
                    }
                })
            }
            filereader.readAsArrayBuffer(blob);
        };
        mediaRecorder.stop();
        saveMedia();
    }
    function saveMedia(){

    }
    function start(){
        desktopCapturer.getSources({types: ['screen']}).then(async (sources) => {
            await navigator.webkitGetUserMedia({
                audio: {
                    mandatory: {
                        chromeMediaSource: 'desktop',
                    }
                },
                video: {
                    mandatory: {
                        chromeMediaSource: 'desktop',
                    }
                }
            }, gotStream, (err)=> {
                console.log(err)
            });
        });
    }
    function gotStream(stream){
        const options = {
            audioBitsPerSecond: 128000,
            videoBitsPerSecond: 2500000,
            mimeType: "video/webm",
        };
        mediaRecorder = new MediaRecorder(stream, options);
        mediaRecorder.ondataavailable = function (e){
            chunk.push(e.data);
        }
        mediaRecorder.start();
    }
    function toStart(){
        router.push({path:'/startRec'})
    }
    function areaChose(){
        ipcRender.send('area:choose');
    }
</script>
<style>
    * {
        margin: 0;
        margin: 0;
    }
</style>
<style scoped>
    .main {
        height: 100vh;
        width: 100%;
        background: rgba(11, 9, 9,.9);
    }
    .item {
        width: 30%;
        width:30%;
        float: left;
        color: #ccc;
        font-size: 18px;
        cursor: pointer;
    }
    .item:hover {
        color: rgb(111, 111, 243);
    }
    .item .icon-i {
        font-size: 40px;
        font-weight: 700;
        padding-top: 60px;
    }
</style>

